<template>
  <div class="app-container">
    <el-button type="primary" @click="refresh">刷新</el-button>
    <el-button type="info" plain icon="el-icon-document" @click="handleDownload">
      导出Excel
    </el-button>

    <el-table :data="logList" style="width: 100%;margin-top:30px;">
      <el-table-column align="center" label="序号" width="60">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户名称" width="100">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="登录IP" width="100">
        <template slot-scope="scope">
          {{ scope.row.ip }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="登录设备">
        <template slot-scope="scope">
          {{ scope.row.device }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="登录时间" width="150">
        <template slot-scope="scope">
          {{ scope.row.login_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="退出时间" width="150">
        <template slot-scope="scope">
          {{ scope.row.logout_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="累计在线" width="80">
        <template slot-scope="scope">
          {{ scope.row.online }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" width="80">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="pagination.current_page"
      :page-size="pagination.per_page"
      :total="pagination.total"
      :page-sizes="[15, 50, 100, 300]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />

    <el-dialog :visible.sync="dialogVisible" :title="'导出Excel'">
      <FilenameOption v-model="filename" class="dialogVisible" />
      <AutoWidthOption v-model="autoWidth" class="dialogVisible" />
      <BookTypeOption v-model="bookType" class="dialogVisible" />
      <div style="text-align:right;">
        <el-button type="danger" @click="handleCancel">取消</el-button>
        <el-button type="primary" :loading="downloadLoading" icon="el-icon-document" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getLoginLog } from '@/api/log'

import FilenameOption from '@/views/excel/components/FilenameOption'
import AutoWidthOption from '@/views/excel/components/AutoWidthOption'
import BookTypeOption from '@/views/excel/components/BookTypeOption'
import { parseTime } from '@/utils'

export default {
  components: { FilenameOption, AutoWidthOption, BookTypeOption },
  data() {
    return {
      logList: [],
      pagination: {
        total: 0,
        current_page: 1,
        per_page: 15
      },
      dialogVisible: false,
      downloadLoading: false,
      filename: '',
      autoWidth: true,
      bookType: 'xlsx'
    }
  },
  created() {
    this.getLoginLog()
  },
  methods: {
    async getLoginLog() {
      const params = {
        page: this.pagination.current_page,
        per_page: this.pagination.per_page
      }
      const res = await getLoginLog(params)
      this.logList = res.data
      this.pagination = res.meta.pagination
    },
    handleCurrentChange(val) {
      this.pagination.current_page = val
      this.getLoginLog()
    },
    handleSizeChange(val) {
      this.pagination.per_page = val
      this.getLoginLog()
    },
    refresh() {
      this.getLoginLog()
    },
    handleDownload() {
      this.dialogVisible = true
      this.filename = ''
    },
    handleConfirm() {
      this.downloadLoading = false
      this.dialogVisible = false
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['序号', '用户名称', '登录ip', '登录设备', '登出时间', '累计在线', '备注']
        const filterVal = ['id', 'name', 'ip', 'device', 'login_time', 'online', 'remark']
        const list = this.logList
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    handleCancel() {
      this.downloadLoading = false
      this.dialogVisible = false
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

<style scoped>
  .dialogVisible{
    width: 100%;
    padding: 10px 0;
  }
</style>
